<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>全球新型冠状病毒实时数据统计</title>
    <link rel="stylesheet" href="css/comon0.css">
</head>
<style type="text/css">
    #cha {
        text-align: center;
        padding: 8px 0px 0px 0px;
    }

    #cha input {
        border: 0;
        background-color: rgba(255, 255, 255, .04);
        color: white;
        font-size: 20px;
    }

    #cha button {
        border: 0;
        background-color: rgba(255, 255, 255, .04);
        color: rgba(255, 255, 255, .7);
        font-size: 20px;
    }

    #customers {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        width: 100%;
        border: 0;
    }

    #customers td,
    #customers th {
        font-size: 1em;
        text-align: center;
        padding: 3px 7px 2px 7px;
    }

    #customers th {
        font-size: 1.1em;
        padding-top: 5px;
        padding-bottom: 4px;
        color: #637c9f;
    }

    #customers td {
        color: #ffeb7b;
    }
</style>

<body>
<div class="head">
    <h1>全球新型冠状病毒实时数据统计</h1>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter" th:text="${total}">888888888</li>
                        <li class="pulll_left counter" th:text="${pertotal}">666666</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">该国家/地区感染染总人数</li>
                        <li class="pulll_left">新增感染人数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"><img src="images/lbx.png"></div>
                <div class="map2"><img src="images/jt.png"></div>
                <div class="map3"><img src="images/map.png"></div>
                <div class="map4" id="map_1"></div>
            </div>
        </li>
        <li>
            <div class="bar2">

                <form action="/search" id="cha">
                    <div>
                        <input type="text" name="country" required="required" placeholder="输入需查找的国家/地区" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">
                        <button type="submit">查找</button>

                    </div>
                </form>
                <br>
                <div id="container">

                    <table id="customers" cellpadding="10" cellspacing="0">
                        <tr>
                            <th>州/省</th>
                            <th>国家/地区</th>
                            <th>病例总数</th>
                            <th>比前一天新增</th>
                        </tr>
                        <tr th:each="case:${list}">
                            <td th:text="${case.getState()}">henan</td>
                            <td th:text="${case.getCountry()}">china</td>
                            <td th:text="${case.getLatestTotalCases()}">888</td>
                            <td th:text="${case.getDiffFromPrevDay()}">666</td>
                        </tr>
                    </table>
                </div>

                <a href="/" style="font-size: 20px;color: rgba(255, 255, 255, .7);text-decoration: none">返回首页</a>
            </div>
        </li>
    </ul>
</div>
</div>



</body>

</html>